<!DOCTYPE html>
<html>
<head>
    <title>首页 {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head"/>
    <hook name="before_head_end"/>

</head>
<body class="page-index">


        <div class="container">
            <include file="public@nav"/>
            <div class="viewSwitch" style="">
                <div class="deviceSwitch">
                    <img src="/html/img/wx.jpg">
                </div>
            </div>

            <div class="contents">
                <div class="headline clearfix">
                    <div class="slider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href=""><img class="slide" src="/html/img/slide.jpg" title="这是第一张图片" ><p>这是第一张图片</p></a></div>
                            <div class="swiper-slide"><a href=""><img class="slide"  src="/html/img/slide.jpg" title="这是第二张图片"><p>这是第二张图片</p></a></div>
                        </div>
                    </div>
                    <div class="interactive">
                        <div class="search-box">
                            <form>
                                <input class="ipt-keyword" type="text" name="keyword" placeholder="请输入活动名称" /> <button type="submit" class="search">搜索</button>
                            </form>
                        </div>
                        <div class="top-right">
                            <div class="title">
                                <ul class="news-title">
                                    <li class="title-item active">新闻中心</li>
                                    <li class="title-item">最新公告</li>
                                </ul>

                                <!--<a href="http://www.baidu.com" class="more">MORE</a>-->
                            </div>
                            <div class="box-cont">
                                <div class="act-forenotice news-list">
                                    <ul>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
                                    </ul>
                                </div>
                                <div class="act-bulletin news-list hidden">
                                    <ul>
                                        <li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">我是公告举办的文明出行活动预告</a></li>
                                        <li><a href="">我是公告的文明出行活动预告</a></li>
                                        <li><a href="">我是公告的文明出行活动预告</a></li>
                                        <li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="entrance">
                    <!--<div class="entrance-title"></div>-->
                    <a href="{:url('apply')}"> <div class="entrance-item"></div></a>
                    <a href="{:url('apply')}"><div class="entrance-item"></div></a>
                </div>
                <div class="all">
                    目前已注册志愿者： <span class="red">22801</span> 人
                </div>

                <div class="news clearfix">
                    <div class="interactive yhdl">
                       <php> if(!$user){ </php>
                        <div class="login box no-user-info">
                            <div class="title"><h2>用户登录</h2></div>
                            <div class="box-cont">
                                <form  class="js-ajax-form" action="{:url('portal/user/doLogin')}" method="post">
                                    <div class="ipt-line">
                                        <label>用户名：</label><input type="text" name="username" placeholder="账号/邮箱/手机号" class="ipt-loginid">
                                    </div>
                                    <div class="ipt-line">
                                        <label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="password" placeholder="请输入密码" class="ipt-password">
                                    </div>
                                    <div class="ipt-line code-line">
                                        <label>验证码：</label><input type="text" name="captcha" placeholder="验证码"><img src="{:url('captcha')}" onclick="this.src='/portal/index/captcha?height=38&width=110&font_size=20&time='+Math.random();" title="换一张" class="captcha captcha-img verify_img" style="margin-left:5px;" height="38" width="110" font-size="20";"/>
                                        <input type="hidden" name="_captcha_id" value="">
                                    </div>
                                    <div class="ipt-line buttons">
                                        <button class="btn-login">登录</button>
                                        <button class="btn-register"><a href="javascript:;" style="color: white">立即注册</a></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                            <php>}else{</php>
                        <div class="login box minHeight user-info">
                            <div class="title"><h2>个人用户</h2></div>
                            <div class="box-cont">
                                <div class="txImg">
                                    <img src="/html/img/logoTx.png" class="txSty">
                                </div>
                                <div class="grxxCon">
                                    <div>
                                        <text class="indexNameSty">姓名 : 张珊珊</text>
                                        <text class="hxSty">|</text>
                                        <text class="zyzlx exit">退出</text>
                                    </div>
                                    <div style="margin-top: 20px;">
                                        注册时间：2019年9月12日
                                    </div>
                                    <div style="margin-top: 20px;">
                                        活动时长：36小时
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                        </div>
                          <php>}</php>
                    </div>
                    <div class="top">
                        <div class="title">
                            <ul class="news-title">
                                <li class="title-item active">活动预告</li>
                                <li class="title-item">活动公告</li>
                            </ul>
                            <!--<a href="http://www.baidu.com" class="more">MORE</a>-->
                        </div>
                        <div class="box-cont">
                            <div class="act-forenotice">
                                <ul>
                                    <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
                                    <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>

                                </ul>
                            </div>
                            <div class="act-bulletin hidden">
                                <ul>
                                    <li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>
                                    <li><a href="">我是公告学交通志愿者举办的文明出行活动预告</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="rank box">
                        <div class="title"><h2>志愿者活动统计</h2>
                            <!--<a href="html/voluntManagement.html" class="more">MORE</a> -->
                        </div>
                        <div class="box-cont">
                            <div class="tab-ctrl">
                                <ul>
                                    <li class="tab-ctrl-item active">按个人</li>
                                    <li class="tab-ctrl-item">按大队</li>
                                    <li class="tab-ctrl-item">按中队</li>
                                </ul>
                            </div>
                            <div class="tab-pannel">
                                <div class="list-by-hour">
                                    <ul>
                                        <li>
                                            <span class="number front">1</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
                                        </li>
                                        <li>
                                            <span class="number front">2</span><a class="name" href="">李祥民</a><span class="remarks">813h</span>
                                        </li>

                                    </ul>
                                </div>
                                <div class="list-by-credit hidden">
                                    <ul>
                                        <li>
                                            <span class="number front">1</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
                                        </li>

                                    </ul>
                                </div>
                                <div class="list-by-credit hidden">
                                    <ul>
                                        <li>
                                            <span class="number front">1</span><a class="name" href="">隔壁二蛋</a><span class="remarks">118分</span>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="map">
                    <div class="volunteers box dt">
                        <div class="title"><h2>活动地点地图</h2></div>
                        <div class="box-cont">
                            <div id="a_map"></div>
                        </div>
                    </div>

                    <div style="clear: both;"></div>
                </div>

                <div class="news clearfix">
                    <div class="interactive yhd">
                        <div class="box boxx">
                            <div class="title"><h2>消防讲堂</h2></div>
                            <div class="box-cont">
                                <div class="act-forenotice">
                                    <ul>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市交通志愿者举办的文明出行活动预告</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="interactive yhd2">
                        <div class="box boxx">
                            <div class="title"><h2>法规标准</h2></div>
                            <div class="box-cont">
                                <div class="act-forenotice">
                                    <ul>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市交通志愿者举办的文明出行活动预告</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="interactive yhd2">
                        <div class="box boxx">
                            <div class="title"><h2>火灾案例</h2></div>
                            <div class="box-cont">
                                <div class="act-forenotice">
                                    <ul>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市曲阜师范大学交通志愿者举办的文明出行活动预告</a></li>
                                        <li><a href="">日照市交通志愿者举办的文明出行活动预告</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="volunteers box slideTxtBox">
                    <div class="title"><h2>志愿风采</h2></div>
                    <div class="box_zyxtab">	
                        <div id="eventPhotos" class="zyxtab_box border_b" onmouseover="changeTab(0)">
                            志愿者活动图片
                        </div>				
                        <div id="volunteers" class="zyxtab_box" onmouseover="changeTab(1)">
                            优秀志愿者
                        </div>
                    </div>
                    <div>
                        <div id="eventP" class="box-cont bd" style="margin-top: 20px;">
                            <ul>
                                <li><a href="/" title="志愿者"><img src="/html/img/volunteers.png"></a></li>
                                <li><a href="/" title="志愿者"><img src="/html/img/volunteers.png"></a></li>
                                <li><a href="/" title="志愿者"><img src="/html/img/volunteers.png"></a></li>
                            </ul>
                        </div>
                        <div id="volunteersP" class="box-cont bd hidden" style="margin-top: 20px;">
                            <ul>
                                <li><a href="/" title="志者"><img src="/html/img/wx.jpg"></a></li>
                                <li><a href="/" title="志愿者"><img src="/html/img/wx.jpg"></a></li>
                                <li><a href="/" title="志愿者"><img src="/html/img/wx.jpg"></a></li>
                            </ul>
                        </div>
    
                    </div>
                </div>
            </div>
        </div>

<include file="public@footer"/>
<!-- /container -->
<include file="public@scripts"/>
        <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4"></script>
        </script><script type="text/javascript" src="/html/js/jquery.SuperSlide.2.1.3.js"></script>
        <script type="text/javascript">
			function changeTab(index){
				if(index==0){
                    $('#eventPhotos').addClass('border_b').siblings().removeClass('border_b');
					$('#eventP').removeClass("hidden").siblings().addClass("hidden");
				}else if(index==1){
					$('#volunteers').addClass('border_b').siblings().removeClass('border_b');
					$('#volunteersP').removeClass("hidden").siblings().addClass("hidden");
				}
			}
	    </script>
        <script>

            (function($){
                "use strict";
                var _map;
                const geo_url = 'https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4&location=';
                function init_swiper(){
                    new Swiper('.slider', {
                        autoplay: true,//可选选项，自动滑动
                    });
                }
                function bind_events(){
                    $('.volunteers li img').hover(function(){$(this).MaxScaleLarge()},function(){$(this).MaxScaleSmall()});

                    /** 登录*/
//                    $('.btn-login').off("click").on("click",function(e){
//                        $.ajax({
//                            type: "post",
//                            url: "login",
//                            dataType: "json",
//                            success: function(res) {
//                                console.log(res)
//                                layer.msg(res.msg)
//                            }
//                        });
//                    })
                    /** 注册*/
                    $('.btn-register').off("click").on("click",function(e){
                        window.location.href="{:url('portal/index/register')}"
                    })
                    /** 退出*/
                    $('.exit').off("click").on("click",function(e){
                        window.location.href="{:cmf_url('user/Index/logout')}"
//                        $('.user-info').addClass("hidden");
//                        $('.no-user-info').removeClass("hidden")
                    })
                    $('.top .title-item').hover(function(e){
                        e.preventDefault();
                        var _index = $(this).index();
                        var _url = $(this).find('a').prop('href');
                        $('.top .more').prop('href',_url);
                        $(this).addClass('active').siblings().removeClass('active');
                        $('.top .box-cont div').eq(_index).removeClass("hidden").siblings().addClass("hidden");
                    });
                    $('.top-right .title-item').hover(function(e){
                        e.preventDefault();
                        var _index = $(this).index();
                        var _url = $(this).find('a').prop('href');
                        $('.top-right .more').prop('href',_url);
                        $(this).addClass('active').siblings().removeClass('active');
                        $('.top-right .box-cont div').eq(_index).removeClass("hidden").siblings().addClass("hidden");
                    });
                    $('.tab-ctrl-item').off("click").on("click",function(e){
                        e.preventDefault();
                        var _index = $(this).index();
                        $(this).addClass('active').siblings().removeClass('active');
                        $('.rank .tab-pannel div').eq(_index).removeClass("hidden").siblings().addClass("hidden");
                    })
                    $(".slideTxtBox").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:8,interTime:50,trigger:"click"});
                }
                function init_map(){
                    _map = new qq.maps.Map(document.getElementById("a_map"), {
                        // 地图的中心地理坐标。
                        center: new qq.maps.LatLng(35.433327,119.51873),
                        zoom: 12,
                    });
                }
                $(function(){
                    init_map();
                    bind_events();
                    init_swiper();
                })
            })(jQuery)

</script>
<hook name="before_body_end"/>
</body>
</html>
